<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .tab {
        margin: 50px auto;
        border: solid yellow;
        text-align: center;
        height: 500px;
        width: 600px;
    }

    tr, td {
        border: solid red;
    }

    tab {
        width: 900px;
    }
</style>
<script>
    window.onload = function () {
        all();
    }

    function all() {
        //通过ajax向服务端请求数据
        //1.实例化一个ajax交流对象
        let xmlHttp = new XMLHttpRequest();
        //2.以get方式向服务器接口student发出异步请求
        xmlHttp.open("get", '/lodinweb2_0_war_exploded/student', true);
        //4.发射
        xmlHttp.send();
        //3.判断状态 监听返回的数据 4 200
        xmlHttp.onreadystatechange = function () {
            //4.响应数据成功
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                //5.写入数据
                let data = JSON.parse(xmlHttp.responseText);
                let tab = document.querySelector(".tab");
                for (let i = 0; i < data.length; i++) {
                    var Trobj = document.createElement("tr"); //动态得生成行列对象
                    for (let j = 0; j <= Object.keys(data[i]).length + 1; j++) {
                        var Tdobj = document.createElement("td");
                        Trobj.appendChild(Tdobj); //生成单元格添加到行标签中
                    }
                    Trobj.children[0].innerHTML = data[i].id;
                    Trobj.children[1].innerHTML = data[i].name;
                    Trobj.children[2].innerHTML = data[i].age;
                    Trobj.children[3].innerHTML = data[i].height;
                    Trobj.children[4].innerHTML = data[i].school;
                    tab.appendChild(Trobj)
                    var btnobj = document.createElement("button");
                    btnobj.innerHTML = "删除";
                    Trobj.children[5].appendChild(btnobj);
                    tab.appendChild(Trobj);
                    btnobj.onclick = del(data[i].id);
                    var btnobj1 = document.createElement("button");
                    btnobj1.innerHTML = "修改";
                    Trobj.children[6].appendChild(btnobj1);
                    tab.appendChild(Trobj);
                    btnobj1.onclick = update(data[i].id);

                }
            }
        }
    }

    function del(id) {
        return function () {
            let xmlHttp = new XMLHttpRequest();
            xmlHttp.open("get", '/lodinweb2_0_war_exploded/crud?type=del&id=' + id, true);
            xmlHttp.send();
            xmlHttp.onreadystatechange = function () {
                //4.响应数据成功
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //5.写入数据
                    let data = xmlHttp.responseText;
                    console.log(data);
                    let tab = document.querySelector(".tab");
                    tab.innerHTML = "";
                    all();
                }
            }
        }
    }
            function update(id) {
                return function () {
                    let xmlHttp = new XMLHttpRequest();
                    xmlHttp.open("get", '/lodinweb2_0_war_exploded/one?type=update&id=' + id, true);
                    xmlHttp.send();
                    xmlHttp.onreadystatechange = function () {
                        //4.响应数据成功
                        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                            //5.写入数据
                            let data = xmlHttp.responseText;
                            console.log(data);
                            let tab = document.querySelector(".tab");
                            tab.innerHTML = "";
                            all();
                        }
                    }
                }
            }

    function update(id) {
        return function () {

        }
    }

</script>
<body style='background:pink'>
<table class="tab" cellspacing="0">
    <tr>
        <td>id</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>身高</td>
        <td>学校</td>
        <td>操作1</td>
        <td>操作2</td>
    </tr>
</table>
<div class="add">
    <a href="add.html">添加</a>
</div>
<div class="out">
    <a href="out.jsp">退出</a>
</div>
<h1>学生数据修改</h1>
    <div class='form-group'>
        <label for='name'>id</label>
        <input readonly=\"readonly\" type='text' class='form-control' value='<%=id%>' name='id' id='id' placeholder='请输入id'>
    </div>
    <div class='form-group'>
        <label for='name'>name</label>
        <input type='text' class='form-control' value='<%=name%>' name='name' id='name' placeholder='请输入name'>
    </div>
    <div class='form-group'>
        <label for='name'>age</label>
        <input type='text' class='form-control' value='<%=age%>' name='age' id='age' placeholder='请输入age'>
    </div>
    <div class='form-group'>
        <label for='name'>height</label>
        <input type='text' class='form-control' value='<%=height%>' name='height' id='height' placeholder='请输入height'>
    </div>
    <div class='form-group'>
        <label for='name'>school</label>
        <input type='text' class='form-control' value='<%=school%>' name='school' id='school' placeholder='请输入school'>
    </div>
    <button>修改</button>
</body>
</html>